<template>
  <div class="express-container" v-if="list.length>0">
    <div class="" v-for="(items, index) in list" :key="index">
      <div class="item-block item-block2 item-block3" v-if="items.express_no">
        <div class="line-con">
          <div class="label">快递名称：</div>
          <div class="line-detail">
            <span>{{items.express_name}}</span>
          </div>
        </div>
        <div class="line-con">
          <div class="label">运单号：</div>
          <div class="line-detail">
            <span>{{items.express_no}}</span>
            <!-- <van-button v-if="items.express_url" :url="items.express_url" round :hairline="false" class="copy">复制单号去查询</van-button> -->
            <van-button v-if="!items.express_url" round :hairline="false" class="copy" @click="copyClick(items.express_no,$event)">复制</van-button>
          </div>
        </div>
      </div>
      <div class="item-block" v-if="items.expressInfo.length>0">
        <ul class="logistics-detail" v-if="items.expressInfo.length>0" :class="items.showMore?'show':'hide'">
          <li class="item" v-for="(item, idx) in items.expressInfo" :key="idx">
            <div class="item-detail" v-show="items.showMore || idx<2">
              <div class="line"></div>
              <div class="icon"></div>
              <div class="date-time">
                <div class="date" v-html="getDate(item.time)"></div>
                <div class="time" v-html="getTime(item.time)"></div>
              </div>
              <div class="status-detail">{{item.status}}</div>
            </div>
          </li>
          <!-- <div class="bg"></div> -->
        </ul>
        <div class="logistics" v-else>
          <p class="express_info" v-show="items.hasInfo == 0">对不起，未查询到物流信息</p>
        </div>
        <div class="more-btn" v-show="items.expressInfo.length>2">
          <div class="btn" @click="showMore(index)">
            <span>{{items.showMore?'收起':'展开'}}</span>
            <i :class="items.showMore?'icon_up':'icon_down'"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getExpressInfo } from '@/api/order/order.js'
export default Vue.extend({
  name: 'index',
  props: {
    detail: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      list: []
    }
  },
  methods: {
    showMore(index) {
      const type = this.list[index].showMore
      const item = this.list[index]
      item.showMore = !type
      Vue.set(this.list, index, item)
    },
    // 复制
    copyClick(text, e) {
      // TODO 微分销复制与小程序差别
        wx.setClipboardData({
          data: text,
          success (res) {
            wx.getClipboardData({
              success(res) {
                wx.showToast({
                  title: '复制成功',
                  icon: 'none',
                });
              }
            })
          }
        })
    },
    init() {
      const expressList = []
      // 积分兑换商品订单详情页
      if (this.$route.name == 'pointOrderDetail') {
        let idx = 0
        if (this.detail.dis_order_lists.length > 0) {
          for (let i = 0; i < this.detail.dis_order_lists.length; i++) {
            const item = this.detail.dis_order_lists[i]
            item.showMore = false
            item.expressInfo = []
            item.hasInfo = null
            expressList.push(item)
            this._getExpressInfo(idx, { id: item.id, type: item.type })
            idx++
          }
        }
      } else {
        let idx = 0
        if (this.detail.dis_order_lists.length>0) {
          for(let i=0;i<this.detail.dis_order_lists.length;i++){
            const item = this.detail.dis_order_lists[i]
            item.showMore = false
            item.expressInfo = []
            item.hasInfo = null
            expressList.push(item)
            this._getExpressInfo(idx, { id: item.id, type: item.type })
            idx++
          }
        }
      }
      this.list = expressList
    },
    _getExpressInfo(idx, data) {
      getExpressInfo(data).then(res => {
        if (res.status == 1) {
          const expressInfo = res.data.result.list
          const item = this.list[idx]
          item.expressInfo = expressInfo
          Vue.set(this.list, idx, item)
        } else {
          const item = this.list[idx]
          if (res.msg.indexOf('订单创建时间过长或快递单号不存在') >= 0) {
            item.hasInfo = 0
          }
          Vue.set(this.list, idx, item)
        }
      })
    },
    getDate(time) {
      const date = time.substr(5, 5)
      return date
    },
    getTime(time) {
      const date = time.substr(11, 5)
      return date
    }
  },
  created() {
    this.init()
  }
})
</script>

<style lang="scss">
@import "src/styles/order/detail";
.express-container{
  .logistics-detail{
    position:relative;
    overflow: hidden;
    padding-right:30px;
    .item{
      position:relative;
      color:#666;
      .icon{
        position:absolute;
        top:14px;
        left:132px;
        width:14px;
        height:14px;
        background:#D8D8D8;
        border-radius:50%;
      }
      .line{
        position:absolute;
        top:14px;
        left:136px;
        width:4px;
        height:100%;
        border-right:2px dashed #D8D8D8;
      }
      .item-detail{
        display:flex;
        padding-bottom:60px;
      }
      &:first-child{
        .item-detail{
          color:#333;
          .icon{
            left:129px;
            width:20px;
            height:20px;
            background:#F21228;
            box-shadow:0px 5px 10px 0px rgba(242,18,40,0.15);
          }
        }
      }
      &:last-child{
        .item-detail{
          padding-bottom:0;
        }
        .line{
          display:none;
        }
      }
      .date-time{
        width:100px;
        margin-right:76px;
        text-align:center;
        .date{
          font-size:28px;
        }
        .time{
          font-size:24px;
          color:#666;
        }
      }
      .status-detail{
        flex:1;
      }
    }
    &.hide{
      .item{
        &:nth-child(2){
          .item-detail{
            padding-bottom:0;
          }
          // .line{
          //   display:none;
          // }
        }
      }
    }
  }
  .more-btn{
    margin-top:40px;
    text-align:center;
    .btn{
      display:inline-block;
      font-size:28px;
      color:#666;
      span{
        margin-right:8px;
      }
      i{
        display:inline-block;
        width:24px;
        height:24px;
        background:url("https://img.wifenxiao.com/h5-wfx/images/icon_right.png") no-repeat;
        background-size:100% 100%;
      }
    }
    .icon_down{
      transform: rotate(90deg);
    }
    .icon_up{
      transform: rotate(-90deg);
    }
  }
}
</style>